<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#container{
			}
			.box {
				width: 50%;
				float: left;
				background: #fff;
			}
			.box .pic {
				width: 100%;
				height: 100%;
			}
			.box .desc {
				color: #676767;
				height: 45px;
				padding: 0 10px;
				text-align: justify;
				font-size: 16px;
				overflow: hidden;
				margin: 5px 0;
			}
			.price {
				height: 30px;
				width: 100%;
			}
			.price p {
				float: left;
				font-size: 16px;
				line-height: 30px;
				margin-left: 10px;
			}
			.price p span:nth-child(1){
				color: #f79e3a;
			}
			.price img {
				width: 25px;
				height: 25px;
				float: right;
				margin-top: 2.5px;
				margin-right: 10px;							
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="box" v-for="(item,index) in list">
				<img class="pic" :src="item.pic"/>
				<div class="desc">{{item.desc}}</div>
				<div class="price">
					<p>
						<span>{{item.newprice | fi}}</span>
						<span>{{item.oldprice | fi}}</span>
					</p>
					<img src="img/cart.png" />
				</div>
			</div>
		</div>
		
		
		<script type="text/javascript" src="js/axios.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#container",
				data: {
					list: []
				},
				created: function (){
					axios.get('http://localhost:8080/list',)
							 .then(data=>{
							 	this.list = data.data;
							 })
							 .catch(e=>{
							 	console.log('数据加载失败');
							 });
					console.log('初始话完毕');
				},
				filters: {
					fi(value){
						return "￥" + value.toFixed(2);
					}
				}
			});
		</script>
	</body>
</html>
